import React from 'react';
import './styles.less';
import { set } from 'lodash-es';
import produce from 'immer';
import { useContext } from '../../context';

export default function Ex(props: any) {
  const { store } = useContext();
  const extype = store.exactions[0]?.type;
  const exMap: any = {
    blue: (
      <div>
        {store.blueData.map((i, ind) => {
          return (
            <>
              {i.map((j, indj) => {
                if (j[1]) return null;

                return (
                  <button
                    onClick={() => {
                      store.setStore(old => {
                        return produce(old, draft => {
                          set(draft, ['blueData', ind, indj, 1], 1);
                        });
                      });
                    }}
                  >
                    蓝 {j[0]}
                  </button>
                );
              })}
            </>
          );
        })}
      </div>
    ),
  };
  return <div className="ex">{exMap[extype]}</div>;
}
